<!-- vuex备份版 -->
<template>
  <div class>
    <props-demo prot-titls="直接传的文字过来，没有加：冒号" :objs="objs" />
    <h2>使用mapState拿到vuex中state值：{{ages}}</h2>
    <h2>拿到vuex中state重命名后值为：{{newNames}}</h2>
    <button @click="mySetUserName" >点击我通过mutations修改state中height值</button>
    <h2>vuex中state中height为：{{height}}</h2>
    <h2>...mapGetters中newHeight为:{{newHeight}}</h2>
    <button @click="mySetEmail">点击修改modules中的state中的email</button>
    <h2>展示moduleA中state的email：{{moduleA.email}}</h2>
    <h2>moduleB中的state的tel：{{tel}}</h2>
  </div>
</template>

<script>
import PropsDemo from "@/views/profile/childCompt/PropsDemo";

import { demoMixin } from "./childCompt/mixin.js";
import { mapState, mapMutations, mapGetters } from "vuex";

export default {
  mixins: [demoMixin],
  data() {
    return {
      message: "我是组件中的message，和mixin中message同名，以组件为主",
      bar: "我是组件中的bar",
      objs: {
        name: "斌哥",
        age: 18,
        height: 180
      }
    };
  },
  created() {
    // console.log(this.message);
    // console.log(this.foo); // mixin中的foo
    // this.myFunc();
    // this.myParentFunc2();
    // console.log(this.$data);
  },
  computed: {
    ...mapState(["ages",'height','moduleA']),  // 直接导入state中ages，这里moduleA是modules的模块
    ...mapState({
      newNames: "names", // 导入并对state中names重命名
      tel:state => state.moduleB.tel, // 第二种拿到moduleB中state中tel
    }),
    ...mapGetters(['newHeight'])
  },
  methods: {
    ...mapMutations(['setUserName','setEmail']), // setEmail为modules中的方法
    mySetUserName(){
      this.setUserName(180)
    },
    mySetEmail(){
      this.setEmail('123456@qq.com')
    },
    myFunc() {
      console.log(
        "我是组件内方法！并且和mixin中方法名冲突，以组件内为准，我在created中执行会执行两次，并且组件created会优先执行。"
      );
    },
    myParentFunc2() {
      console.log("我是组件内方法2");
    }
  },
  components: {
    PropsDemo
  }
};
</script>
